<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" tagdir="/WEB-INF/tags/form" %>
<primus:page title="取消订单">
    <jsp:attribute name="css">
        <style type="text/css">
            #table .operate {
                min-width: 80px;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $("#table").DataTable({
                    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "所有"]],
                    "columnDefs": [{"targets": [7], "orderable": false}],
                    "searching": false,
                    "order": [[0, "asc"]]
                });
            });
            $("body").on("click", ".geo-line", function () {
                var id = $(this).data("id");
            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    <a href="geo/provinces">
                        订单管理
                    </a>
                </li>
                <li class="active">
                    取消订单
                </li>
            </ul>
        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter blue">
                                取消订单
                            </h3>
                            <div class="row">
                                <div style="float:right">
                                    <button class="btn btn-white btn-default btn-round backButton">
                                        <i class="ace-icon fa fa-reply icon-only" style="padding:0;margin:0;float:left;box-sizing:border-box;"></i>
                                        返回
                                    </button>
                                    <button class="btn btn-white btn-default btn-round" id="closeButton">
                                        <i class="ace-icon fa fa-times red2" style="padding:0;margin:0;float:left;box-sizing:border-box;"></i>
                                        关闭
                                    </button>
                                </div>
                            </div>

                            <div class="row">
                                <div style="width: 100%">
                                    <label class="col-sm-4 control-label no-padding-right" >取消原因</label>
                                    <select style="width: 180px" class="form-control" id="form-field-select-1">
                                        <option value=""></option>
                                        <option value="AL">Alabama</option>
                                        <option value="AK">Alaska</option>
                                    </select>
                                </div>
                            </div>

                            <br>
                            <br>
                            <br>

                            <div class="row">
                                <div style="width: 100%">
                                    <label class="col-sm-4 control-label no-padding-right" >取消备注</label>
                                    <input type="text" id="form-field-1" class="col-xs-10 col-sm-5" placeholder="请输入取消备注" >
                                </div>
                            </div>

                            <br>
                            <br>
                            <br>

                            <div class="row">
                                <div style="width: 100%">
                                    <button type="button" class="btn btn-white btn-danger btn-sm backButton" >返回</button>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button type="button" class="btn btn-white btn-yellow btn-sm" id="cancelOrderButton">确认取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <script>

            var row;        //派单详情数据

            $(function(){

                GetRequest();   //获取行数据

            });

            // 关闭按钮(跳转派单列表页面)
            $("#closeButton").on("click", function () {
                window.location.href="/dispatch.do";
            });

            // 获取session 存储的值
            function GetRequest() {
                var vc = sessionStorage.getItem('cancelOrder'); // => 返回testKey对应的值
                row = JSON.parse(vc);
            };

            // 返回按钮(跳转回详情页面)
            $(".backButton").on("click", function () {
                window.location.href="/dispatch/details";   //跳转派单页面
            });

            // 确认取消按钮(提交取消数据)
            $("#cancelOrderButton").on("click", function () {
                $("#form-field-select-1").html().text();    //取消原因
                $("#form-field-1").val();                   //取消备注
            });

        </script>
    </jsp:body>
</primus:page>